<template>
  <h1>一个人的信息</h1>
  姓：<input type="text" v-model="person.lastName"> <br>
  名：<input type="text" v-model="person.firstName"> <br>
<!--  <span>全名：{{person.fullName}}</span>-->
  <span>全名：<input type="text" v-model="person.fullName"></span>
</template>

<script>
import {reactive,computed} from 'vue'
export default {
    name: "Demo",
    setup(){
      //数据
        let person=reactive({
          lastName:'张',
          firstName:"三"
        })

      //计算属性——简写（没有考虑到计算属性被修改的情况）
     /* person.fullName=computed(() => {
         return person.lastName+'-'+person.firstName
      })*/
      //计算属性——完整写法（考虑读和写）
      person.fullName=computed({
        get(){
          return person.lastName+'-'+person.firstName
        },
        set(value){
          const nameArr=value.split('-')
          person.lastName = nameArr[0];
          person.firstName = nameArr[1]
        }
      })

      //返回一个对象（常用）
      return{
          person
      }
    },
}
</script>

<style scoped>

</style>
